﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<link rel="shortcut icon" href="logo.png" type="image/x-icon">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
        *{margin:0; padding:0;}
       .logo {
            width: 56px;
            margin:0 auto;
        }
        p{
            letter-spacing:2px;
            width: 120px;
            margin:10px auto;
            font-size: 18px;
        }
       form{
            width: 80%;
           margin:10% auto;
           margin-left:16%;

        }
       input[type="tel"],input[type=password], input[type=text]{
            width: 80%;
            height: 30px;
            line-height:30px;
            outline: none;
            border:1px solid #ccc;
            margin-top:6%;
            padding-left:5px;
            box-sizing:border-box;
        }
        input[type=button]{
            height: 30px;
            margin-top:5px;

        }
        #reg{
            width: 80%;
            outline:none;
            height: 30px;
            border:none;
            color:white;
            font-size:16px;
            margin-top:5%;
            background-color: #FF6700;
        }
        .error, #yzmError{
            height: 20px;
            font-size:12px;
            line-height:20px;
            box-sizing:border-box;
            display:block;
            color:red;
            margin-top:10px;
        }
        .login{
            font-size:12px;
            margin-top:5%;
            text-align: left;
        }
        .login a{
            color:black;
            text-decoration:none;
        }
    </style>
</head>
<body>
<div>
<div class="logo"><img src="logo.png" alt=""></div>
<p>注册小米账号</p>
<form action="">
    <div><input type="tel" placeholder="请输入手机号" autocomplete="off" id="tel">
          <div class="error" id="telerror"></div>
    </div>
    <div><input type="text" placeholder="请输入验证码" id="yzm">
        <input type="button" value="获取验证码" id="getyzm">
        <div id="yzmError"></div>
    </div>
    <div><input type="password" placeholder="请设置密码" id="pwd" class="pwd">
        <div class="error" id="pwderror"></div>
    </div>
    <div><input type="button" value="注册" id="reg" class="reg"></div>
    <div class="login">已有账号？<a href="#">请登录</a></div>
</form>
</div>
<script type="text/javascript" src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js"></script>
<script>
    var i = 60;
    getyzm.onclick = function() {
        // var time1 = Date.now();
        // if (localStorage.sendTime){
        //     if (time1 - localStorage.sendTime < 60*1000){
        //         alert("请稍后");
        //         return;
        //     }else{
        //         localStorage.senTime = time1;
        //     }
        // } else{
        //     localStorage.senTime = time1;
        // }
        if (tel.value.length > 0) {
            $.post("http://47.104.241.232/yzm.php",
                "phone=" + $("#tel").val() + "&yzm="+ $("yzm").val(),
                function (data) {
                console.log(data);
                }); // 从服务器获取验证码
            getyzm.setAttribute("disabled", true); //验证码禁用
            time = setInterval(function () {
                if (i == 1) {
                    clearInterval(time);
                    i = 60;
                    getyzm.value = "获取验证码";
                    getyzm.removeAttribute("disabled", true);
                    return;  //验证码时间到1时 设置的结果
                }
                getyzm.value = "重新发送" + --i + "s";
            }, 1000);
            getyzm.value = "重新发送" + i + "s";   // 单击验证码后变换
        } else {
            telerror.innerHTML = "*请填写手机号！"
        }
    };
        pwd.onclick = function(){
            pwderror.innerHTML = "";
            if (tel.value.length == 0){
                telerror.innerHTML = "*请填写手机号！"
            }
        };
       yzm.onclick = function(){
            yzmError.innerHTML = "";
        };
        tel.onkeyup = function () {
            if (tel.value.length > 0){
                telerror.innerHTML = "";
            } else{
                telerror.style.display = "block";
                telerror.innerHTML = "*请输入密码";
            }
        };
        pwd.onkeyup = function () {
        if (pwd.value.length > 0){
            pwderror.innerHTML = "";
        } else{
            pwderror.style.display = "block";
            pwderror.innerHTML = "*请输入密码";
        }
        };
        function check() {
            var a = /^1[345789]\d{9}$/;
            if (!a.test(tel.value) && tel.value.length > 0) {
                telerror.innerHTML = "*请填写正确的手机号！";
                return;
            }
            if (tel.value.length == 0){
                telerror.innerHTML = "*请填写手机号!";
                return;
            }
            if (pwd.value.length == 0){
                pwderror.innerHTML = "*请填写密码";
                return;
            }

            if (yzm.value.length == 6){
                yzmError.innerHTML = "";
            }else{
                yzmError.innerHTML = "*验证码错误";
                return;
            }
            return true;
        }
    var reg = document.getElementById("reg");
    reg.onclick = function () {
        if (!check()){
            return false;
        }
        var xml = new XMLHttpRequest();
        xml.open("post","http://47.104.241.232/add.php",true);
        xml.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xml.send("tel=" + tel.value + "&pwd=" + pwd.value);
        xml.onreadystatechange = function () {
            if (xml.readyState == 4&&xml.status == 200){
                if (xml.responseText = "true"){
                    location = "login.html";
                } else{
                    alert("登录失败，看看哪里填错了！")
                }
            }
        };
    }
</script>
</body>
</html>